/**
 *对FlatList进行一层通用的封装,主要是下拉刷新和到底加载
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    FlatList, View, Text,
} from 'react-native';
export default class WFlatList extends Component {

    static defaultProps={
        refreshing:false,
        more:true,
    };

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(newProps) {

    }

    render() {
        return (
            <FlatList
                style={this.props.style}
                ItemSeparatorComponent={() => <View style={{backgroundColor: '#dadada', height: 7}}/>}
                ListEmptyComponent={() => <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><Text>暂无数据</Text></View>}
                refreshing={this.props.refreshing}
                onEndReachedThreshold={0.1}
                onEndReached={({distanceFromEnd}) => {
                    this._onEndReached(distanceFromEnd)
                }}
                ListFooterComponent={() =>
                    <View style={{height: 50, justifyContent: 'center', alignItems: 'center'}}>
                        <Text>{this.props.more?'正在加载...':'没有更多了'}</Text>
                    </View>}
                {...this.props}/>
        );
    }

    _onEndReached(distanceFromEnd) {
        if (distanceFromEnd <= 0||!this.props.more) {
            return;
        }
        //执行加载更多
        this.props.onLoadMore();
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});
